.page {
  flex: 1 1 auto;
  background: #192c53;
  border-radius: 10px;

  .main {
    width: 856px;
    margin: 60px auto 30px auto;
    .applytitle {
      height: 42px;
      margin: 0 auto;
      color: #ffffff;
      font-weight: 500;
      font-size: 30px;
      line-height: 42px;
      text-align: center;
    }
    .titleimg {
      display: block;
      width: 150px;
      height: 41px;
      margin: 0 auto;
    }

    .step {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;

      .item {
        display: flex;
        align-items: center;

        .icon {
          width: 30px;
          height: 30px;
          margin-right: 10px;
          line-height: 30px;
          text-align: center;
          background: #293e6b;
          border-radius: 21px;

          .text {
            color: #fff;
            font-weight: 600;
            font-size: 14px;
          }
        }

        .text {
          height: 22px;
          color: #7688a5;
          font-size: 16px;
          line-height: 22px;
        }

        &.actived {
          .icon {
            background: #29ba91;

            .text {
              color: #000;
            }
          }

          .text {
            color: #29ba91;
          }
        }
      }

      .line {
        width: 50px;
        height: 1px;
        margin: 0 30px;
        background-color: #293e6b;
      }
    }
  }

  .form {
    margin-top: 50px;

    :global {
      .z-check-tag-item {
        margin-bottom: 20px;
        padding: 10px 16px;
        border-radius: 6px;
      }

      .ant-form-item-control-input-content {
        width: 100%;
      }
      .ant-form-item {
        margin-bottom: 30px;
      }

      .ant-form-item-label {
        margin-bottom: 10px;
        padding: 0;
        font-size: 14px;
        line-height: 20px;

        > label {
          color: #7688a5;
        }
      }
    }
  }

  .footer {
    display: flex;
    justify-content: flex-end;

    .submit {
      width: 180px;
      height: 50px;
      color: #fff;
      font-size: 16px;
      line-height: 50px;
      text-align: center;
      background: #254df8;
      border-radius: 25px;
      cursor: pointer;
    }
  }
}

.textarea {
  padding: 10px;
  color: #fff;
  font-size: 14px;
  border: 1px solid #0f2042 !important;
  border-radius: 6px;

  &:focus,
  &:hover {
    border: 1px solid #0f2042;
    box-shadow: none !important;
  }
}

.upload {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;

  .tips {
    height: 39px;
    padding-left: 16px;
    color: #fff;
    font-size: 12px;
    line-height: 39px;
    background: #2f5083;
  }

  .body {
    padding: 15px;
    border: 1px dashed #7688a5;
    border-width: 0 1px 1px 1px;

    > span {
      display: flex;
    }

    .drag {
      width: 264px;
      height: 225px;
      border: none;

      :global {
        .ant-upload {
          padding: 0;
        }
      }
    }

    .item {
      width: 264px;
      height: 225px;
      background: #293e6b;
    }
  }
}

// 联系方式
.contact {
  display: flex;
  align-items: center;

  .item {
    display: flex;
    align-items: center;
    width: 273px;
    margin-right: 18px;

    &:last-child {
      margin-right: 0;
    }

    .icon {
      width: 24px;
      height: 24px;
      margin-right: 4px;
      background: url('~@/assets/pc/images/teachers/icon-nochecked.png') no-repeat center / 100%;
      cursor: pointer;

      &.checked {
        background-image: url('~@/assets/pc/images/teachers/icon-checked.png');
      }
    }

    .wrapper {
      display: flex;
      overflow: hidden;
      color: #fff;
      font-size: 14px;
      line-height: 40px;
      border-radius: 6px;

      .key {
        width: 70px;
        height: 40px;
        text-align: center;
        background: #293e6b;
      }

      .value {
        flex: 1 1 auto;
        height: 40px;
        padding: 0 10px;
        background: #0f2042;
        border: none;
        outline: none;
      }
    }
  }
}

//性别
.gender {
  display: flex;
  align-items: center;

  .item {
    width: 54px;
    height: 54px;
    margin-right: 35px;
    border: 1px solid transparent;
    border-radius: 50%;

    &.male {
      background: url('~@/assets/pc/images/teachers/male.png') no-repeat #293e6b;
      background-position: center 6px;
      background-size: 27px 53px;
      cursor: pointer;
    }

    &.female {
      background: url('~@/assets/pc/images/teachers/female.png') no-repeat #293e6b;
      background-position: center 6px;
      background-size: 27px 53px;
      cursor: pointer;
    }

    &.actived {
      background-color: rgba(41, 186, 145, 0.2);
      border: 1px solid #29ba91;
    }
  }
}

.status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 230px;

  .icon {
    width: 66px;
    height: 66px;
  }
  .title {
    height: 25px;
    margin-top: 30px;
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
  }
  .des {
    width: 100%;
    margin-top: 30px;
    .subtitle1 {
      height: 25px;
      color: #ffffff;
      font-weight: 600;
      font-size: 18px;
      font-style: normal;
      line-height: 25px;
      text-align: center;
    }
    .subtitle2 {
      height: 22px;
      margin-top: 20px;
      color: #ffffff;
      font-weight: 400;
      font-size: 16px;
      font-style: normal;
      line-height: 22px;
      text-align: center;
      opacity: 0.5;
    }
  }

  .button {
    width: 124px;
    height: 44px;
    margin-top: 20px;
    color: #fff;
    line-height: 44px;
    text-align: center;
    background: #254df8;
    background: #254df8;
    border-radius: 12px;
    cursor: pointer;
  }
}
